import React, { Component } from 'react';

import { SelectItemList, SelectItem, Scroll } from '../common-ui-parts';
import CommonConstants from '../../constants/CommonConstants';
import { SimulationItemConstant as SiC } from '../../constants/InputItemConstants';
import ModalDialog, { ButtonType } from '../common-ui-parts/ModalDialog';
import CommonUtils, { FREQUENCY } from '../../logics/CommonUtils';
import './AlcoholAmount.css';

class AlcoholAmount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalInputData: props.modalInputData,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ modalInputData: nextProps.modalInputData });
  }

  _setModalInputData(name, value) {
    this.setState({
      modalInputData: {
        ...this.state.modalInputData,
        [name]: value,
        alcoholHabit: SiC.ALCOHOL_HABIT.IS_DRINKING.value, // 飲酒習慣'飲まない'の場合も、飲酒量を計算するため'飲む'に強制する
      },
    });
  }

  _callBack(isOk) {
    this.props.modalCallBack({ isOk: isOk, modalInputData: this.state.modalInputData });
  }

  render() {
    const { modalInputData } = this.state;

    // 未選択置換
    const alcoholAmountSake = CommonUtils.ifNull(modalInputData.alcoholAmountSake, SiC.ALCOHOL_AMOUNT_SAKE.NO_DRINKING.value);
    const alcoholAmountShochu = CommonUtils.ifNull(modalInputData.alcoholAmountShochu, SiC.ALCOHOL_AMOUNT_SHOCHU.NO_DRINKING.value);
    const alcoholAmountBeer = CommonUtils.ifNull(modalInputData.alcoholAmountBeer, SiC.ALCOHOL_AMOUNT_BEER.NO_DRINKING.value);
    const alcoholAmountWhiskey = CommonUtils.ifNull(modalInputData.alcoholAmountWhiskey, SiC.ALCOHOL_AMOUNT_WHISKEY.NO_DRINKING.value);
    const alcoholAmountWine = CommonUtils.ifNull(modalInputData.alcoholAmountWine, SiC.ALCOHOL_AMOUNT_WINE.NO_DRINKING.value);
    const alcoholFrequency = CommonUtils.ifNull(modalInputData.alcoholFrequency, SiC.ALCOHOL_FREQUENCY.MONTH_LESS1.value);
    const frequencyLabel = modalInputData.alcoholFrequency ? SiC.ALCOHOL_FREQUENCY.getLabel(modalInputData.alcoholFrequency) : '未選択';

    // エタノール算出
    const ethanol = CommonUtils.calcUnitEthanol(modalInputData.alcoholHabit, alcoholAmountSake, alcoholAmountShochu,
      alcoholAmountBeer, alcoholAmountWhiskey, alcoholAmountWine);
    const totalEthanol = CommonUtils.calcEthanol(modalInputData.alcoholHabit, alcoholFrequency, alcoholAmountSake,
      alcoholAmountShochu, alcoholAmountBeer, alcoholAmountWhiskey, alcoholAmountWine);

    return (
      <div className="alcoholAmount">
        {/* 飲酒習慣 */}
        <ModalDialog
          title={'お酒の飲み方を見直す'}
          buttonType={ButtonType.CANCEL_OK}
          open={this.props.open}
          onAction={() => this._callBack(true)}
          onCancel={() => this._callBack(false)}
          className={'alcoholAmountModal'}
          contentClassName={'maxSize'}
        >
          <Scroll
            height={420}
            customStyle={CommonConstants.SIMULATION_MODAL_SCROLL.STYLE}
          >
            {/* 飲酒頻度 */}
            <dl className="content">
              <dt>飲酒頻度</dt>
              <dd><SelectItemList
                name={SiC.ALCOHOL_FREQUENCY}
                value={modalInputData[SiC.ALCOHOL_FREQUENCY]}
                placeholder="選択してください"
                propagate={(name, value) => this._setModalInputData(name, value)}
              >
                {SiC.ALCOHOL_FREQUENCY.choices.map((choice, index) => (
                  <SelectItem key={index} value={choice.value} label={choice.label} />
                ))}
              </SelectItemList>
              </dd>
            </dl>
            {/* ビール・発泡酒 */}
            <dl className="content">
              <dt>{SiC.ALCOHOL_AMOUNT_BEER.label}</dt>
              <dd>
                <SelectItemList
                  name={SiC.ALCOHOL_AMOUNT_BEER}
                  value={modalInputData[SiC.ALCOHOL_AMOUNT_BEER]}
                  placeholder="選択してください"
                  propagate={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.ALCOHOL_AMOUNT_BEER.choices.map((choice, index) => (
                    <SelectItem key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectItemList>
                <ul className="remark">
                  <li>大瓶/633ml＝1本(23g)</li>
                  <li>中瓶/500ml缶＝0.8本(18g)</li>
                  <li>小瓶/350ml缶＝0.6本(14g)</li>
                </ul>
              </dd>
            </dl>
            {/* ワイン */}
            <dl className="content">
              <dt>{SiC.ALCOHOL_AMOUNT_WINE.label}</dt>
              <dd>
                <SelectItemList
                  name={SiC.ALCOHOL_AMOUNT_WINE}
                  value={modalInputData[SiC.ALCOHOL_AMOUNT_WINE]}
                  placeholder="選択してください"
                  propagate={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.ALCOHOL_AMOUNT_WINE.choices.map((choice, index) => (
                    <SelectItem key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectItemList>
                <ul className="remark">
                  <li>1杯＝100ml(10g)</li>
                </ul>
              </dd>
            </dl>
            {/* 日本酒 */}
            <dl className="content">
              <dt>{SiC.ALCOHOL_AMOUNT_SAKE.label}</dt>
              <dd>
                <SelectItemList
                  name={SiC.ALCOHOL_AMOUNT_SAKE}
                  value={modalInputData[SiC.ALCOHOL_AMOUNT_SAKE]}
                  placeholder="選択してください"
                  propagate={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.ALCOHOL_AMOUNT_SAKE.choices.map((choice, index) => (
                    <SelectItem key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectItemList>
                <ul className="remark">
                  <li>1合＝180ml(23g)</li>
                </ul>
              </dd>
            </dl>
            {/* 焼酎または泡盛 原液で */}
            <dl className="content">
              <dt>{SiC.ALCOHOL_AMOUNT_SHOCHU.label}</dt>
              <dd>
                <SelectItemList
                  name={SiC.ALCOHOL_AMOUNT_SHOCHU}
                  value={modalInputData[SiC.ALCOHOL_AMOUNT_SHOCHU]}
                  placeholder="選択してください"
                  propagate={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.ALCOHOL_AMOUNT_SHOCHU.choices.map((choice, index) => (
                    <SelectItem key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectItemList>
                <ul className="remark">
                  <li>原液の量 1合＝180ml(36g)</li>
                  <li>チューハイ350ml＝0.7合(25g)</li>
                </ul>
              </dd>
            </dl>
            {/* ウィスキー・ブランデー */}
            <dl className="content">
              <dt>{SiC.ALCOHOL_AMOUNT_WHISKEY.label}</dt>
              <dd>
                <SelectItemList
                  name={SiC.ALCOHOL_AMOUNT_WHISKEY}
                  value={modalInputData[SiC.ALCOHOL_AMOUNT_WHISKEY]}
                  placeholder="選択してください"
                  propagate={(name, value) => this._setModalInputData(name, value)}
                >
                  {SiC.ALCOHOL_AMOUNT_WHISKEY.choices.map((choice, index) => (
                    <SelectItem key={index} value={choice.value} label={choice.label} />
                  ))}
                </SelectItemList>
                <ul className="remark">
                  <li>シングル1杯＝30ml(10g)</li>
                </ul>
              </dd>
            </dl>
          </Scroll>
          {/* エタノール量 */}
          <dl className="content modal-bottom">
            <dt>週あたりエタノール量(g)</dt>
            <dd style={{ height: '60px', paddingTop: '10px' }}>{ethanol} × {FREQUENCY[alcoholFrequency]} ({frequencyLabel}) = {totalEthanol}</dd>
          </dl>
        </ModalDialog>
      </div>
    );
  }
}

/*AlcoholAmount.propTypes = {
  open: React.PropTypes.bool.isRequired,
  modalInputData: React.PropTypes.object.isRequired,
  modalCallBack: React.PropTypes.func,
};*/

export default AlcoholAmount;
